// 内容的组件
<template>
	<div style="margin-top: 0px;">
		<!-- 头 -->
		<div class="header">
			<i v-if="!isCollapse" class="el-icon-s-fold" @click="setIsCollapse"></i>
			<i v-else class="el-icon-s-unfold" @click="setIsCollapse"></i>
			<div class="header-right">
				<div>
					{{newTime}}&emsp;    
					<i class="el-icon-switch-button" @click="loginOut">退出</i>
				</div>
			</div>
		</div>
		<!-- 路由出口 -->
		<div>
			<router-view />
		</div>
	</div>
</template>
<script>
	const days = ['天', '一', '二', '三', '四', '五', '六']; // 星期数组
	var icnow = new Date(); // 初始化时间
	var interval; // 定义全局定时器，用于清除定时器
	export default {
		data() {
			return {
				username: '',
				year: icnow.getFullYear(),
				month: icnow.getMonth() + 1,
				date: icnow.getDate(),
				day: days[icnow.getDay() - 1],
				time: icnow.toTimeString().substring(0, 8)

			}
		},
		//调用父类的变量
		props: ['isCollapse'],
		methods: {

			loginOut() {
				this.$confirm('退出挂号系统，是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				 //退出的方法
				 //清空本地存储
				 localStorage.removeItem("user");
				 //返回登录页面
				 this.$router.push("/login");
				}).catch(() => {       
				});
			},
			setIsCollapse() {
				// 修改父组件index的isCollapse属性
				this.$emit('setIsCollapse')
			},
		},
		created() {
			interval = setInterval(() => {
				let icnow = new Date();
				this.year = icnow.getFullYear();
				this.month = icnow.getMonth() + 1;
				this.date = icnow.getDate();
				this.day = days[icnow.getDay()];
				this.time = icnow.toTimeString().substring(0, 8);
			}, 1000)
		},
		computed: {
			// 当前时间
			newTime: function() {
				return this.year + '年' + this.month + '月' + this.date + '日 星期' + this.day + ' ' + this.time;
			}
		},
		beforeDestroy() {
			clearInterval(interval);
		}
	}
</script>
<style lang='less' scoped>
	.header {
		height: 60px;
		background: #0c6785;

		.el-icon-s-fold,
		.el-icon-s-unfold {
			font-size: 35px;
			float: left;
			padding-top: 10px;
		}

		color: rgb(255, 255, 255);

	}

	.header-right {
		float: right;
		padding-right: 20px;
		padding-top: 20px;
		display: flex;

	
	}
</style>
